import React from 'react';
import './App.less';
import { Table } from 'antd';

export const Header:React.FC =() => {
   const bol = 1
   //表体
   const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
      {
         key: '2',
         name: '胡彦祖',
         age: 42,
         address: '西湖区湖底公园1号',
       },
    ];
    
    //表头
    const columns = [
      {
        title: '姓名', //表头名称
        dataIndex: 'name',  //对应这一列的数据，从dataSource里拿，比如dataIndex为name，拿dataSource的name
        key: 'name',
        width: 100,
        render: (text: any, record: any) => { //可以根据条件渲染 列数据
         console.log('item',record);  //为对应dataSource的数据
         //record: {
         //    key: '1',
         //    name: '胡彦斌',
         //    age: 32,
         //    address: '西湖区湖底公园1号',
         //  },
         return bol ? '-' : record.name
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
        width: 100,
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
        width: 100,
      },
      {
         title: '住址',
         dataIndex: 'address',
         key: 'address',
         width: 100,
       },
    ];
    
    return (
      <>
      <div>
      <Table  
         rowKey="唯一标识" 
         dataSource={dataSource} 
         columns={columns} 
         scroll={{ x: 1500, y: 300 }} 
         loading = {false}
         onRow={record => {
            return {
              onClick: event => {
               console.log('点击行',event.target);//元素
              }, 
            };
          }}
          onHeaderRow={column => {
            return {
              onClick: () => {
               console.log('点击表头行',column);
               
              }, 
            };
          }}
      />;
      </div>
       </>
    )
  }
  // scroll ：给表一个宽高，给每一列有一个width值，如果合起来超过了，就有滚动条
  // loading ； table是否无数据的时候加载效果
  // onRow： 点击行
  // onHeaderRow： 点击头
